import React from 'react';
import { Link } from 'react-router-dom';
import { ArrowRight, Star, Tag, Filter, MapPin } from 'lucide-react';
export function Water() {
  const featuredGear = [{
    id: 'dagger-phantom',
    name: 'Dagger Phantom Kayak',
    category: 'Kayaks',
    rating: 4.8,
    price: '$1,199',
    image: 'https://images.unsplash.com/photo-1572331165267-854da2b10ccc?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=500&q=80'
  }, {
    id: 'red-paddle-sport',
    name: 'Red Paddle Co Sport 11\'3"',
    category: 'Paddleboards',
    rating: 4.9,
    price: '$1,399',
    image: 'https://images.unsplash.com/photo-1526188717906-ab5f4068634e?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=500&q=80'
  }, {
    id: 'nrs-maverick',
    name: 'NRS Maverick PFD',
    category: 'PFDs',
    rating: 4.7,
    price: '$125',
    image: 'https://images.unsplash.com/photo-1530870110042-98b2cb110834?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=500&q=80'
  }, {
    id: 'watershed-yukon',
    name: 'Watershed Yukon Dry Bag',
    category: 'Dry Bags',
    rating: 4.9,
    price: '$159',
    image: 'https://images.unsplash.com/photo-1623676504310-61d0d03e050f?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=500&q=80'
  }, {
    id: 'werner-camano',
    name: 'Werner Camano Paddle',
    category: 'Paddles',
    rating: 4.8,
    price: '$250',
    image: 'https://images.unsplash.com/photo-1472745942893-4b9f730c7668?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=500&q=80'
  }, {
    id: 'kokatat-meridian',
    name: 'Kokatat Meridian Dry Suit',
    category: 'Apparel',
    rating: 4.9,
    price: '$1,290',
    image: 'https://images.unsplash.com/photo-1509609066221-11f8588ee9c8?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=500&q=80'
  }];
  const waterDestinations = [{
    id: 'colorado-river',
    name: 'Colorado River',
    location: 'Grand Canyon, USA',
    image: 'https://images.unsplash.com/photo-1543191878-2baa4ff8a7b9?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1000&q=80'
  }, {
    id: 'lake-tahoe',
    name: 'Lake Tahoe',
    location: 'California/Nevada, USA',
    image: 'https://images.unsplash.com/photo-1533228705496-072ca91c0513?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1000&q=80'
  }, {
    id: 'milford-sound',
    name: 'Milford Sound',
    location: 'New Zealand',
    image: 'https://images.unsplash.com/photo-1440519025108-41c6e045ddd5?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1000&q=80'
  }];
  const categories = ['Kayaks', 'Paddleboards', 'PFDs', 'Dry Bags', 'Paddles', 'Apparel', 'Safety', 'Accessories'];
  return <div className="w-full bg-earth-dark">
      {/* Hero Section */}
      <section className="relative h-[60vh] flex items-center justify-center overflow-hidden">
        <img src="https://images.unsplash.com/photo-1439066615861-d1af74d74000?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2000&q=80" alt="On The Water" className="absolute w-full h-full object-cover" />
        <div className="absolute inset-0 bg-gradient-to-t from-earth-dark to-transparent"></div>
        <div className="container mx-auto px-4 relative z-10 text-center">
          <h1 className="font-display text-5xl md:text-7xl text-white mb-4 drop-shadow-lg">
            ON THE WATER
          </h1>
          <p className="text-xl md:text-2xl text-sand-light mb-8 max-w-3xl mx-auto drop-shadow-md">
            Equipment for kayaking, paddleboarding, and water adventures
          </p>
        </div>
      </section>
      {/* Category Navigation */}
      <section className="py-8 bg-carbon-black sticky top-[73px] z-30">
        <div className="container mx-auto px-4 overflow-x-auto">
          <div className="flex space-x-4">
            {categories.map(category => <a key={category} href={`#${category.toLowerCase().replace(' ', '-')}`} className="whitespace-nowrap px-4 py-2 rounded-full bg-earth-dark hover:bg-lake-blue transition-colors">
                {category}
              </a>)}
          </div>
        </div>
      </section>
      {/* Featured Gear */}
      <section className="py-16">
        <div className="container mx-auto px-4">
          <div className="flex flex-col md:flex-row justify-between items-center mb-8">
            <h2 className="font-display text-3xl md:text-4xl mb-4 md:mb-0">
              TOP-RATED WATER GEAR
            </h2>
            <div className="flex space-x-4">
              <button className="flex items-center space-x-2 px-4 py-2 border border-gray-700 rounded-md hover:border-lake-blue transition-colors">
                <Filter size={18} />
                <span>Filter</span>
              </button>
              <button className="flex items-center space-x-2 px-4 py-2 border border-gray-700 rounded-md hover:border-lake-blue transition-colors">
                <Tag size={18} />
                <span>Sort</span>
              </button>
            </div>
          </div>
          <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
            {featuredGear.map(item => <Link key={item.id} to={`/review/${item.id}`} className="group">
                <div className="bg-carbon-black rounded-lg overflow-hidden h-full flex flex-col">
                  <div className="relative h-64 overflow-hidden">
                    <img src={item.image} alt={item.name} className="w-full h-full object-cover transition-transform duration-500 group-hover:scale-110" />
                    <div className="absolute top-0 left-0 bg-lake-blue px-3 py-1">
                      <span className="font-display text-sm">
                        {item.category}
                      </span>
                    </div>
                  </div>
                  <div className="p-6 flex flex-col flex-grow">
                    <div className="flex items-center mb-2">
                      <div className="flex text-lake-blue">
                        {[...Array(5)].map((_, i) => <Star key={i} size={16} className={i < Math.floor(item.rating) ? 'fill-lake-blue' : 'text-gray-600'} />)}
                      </div>
                      <span className="ml-2 text-gray-400">{item.rating}</span>
                    </div>
                    <h3 className="font-display text-xl mb-2 group-hover:text-lake-blue transition-colors">
                      {item.name}
                    </h3>
                    <div className="mt-auto flex justify-between items-center">
                      <span className="text-lg font-bold">{item.price}</span>
                      <span className="text-lake-blue flex items-center">
                        View Details
                        <ArrowRight size={16} className="ml-1 transition-transform group-hover:translate-x-1" />
                      </span>
                    </div>
                  </div>
                </div>
              </Link>)}
          </div>
          <div className="mt-8 text-center">
            <button className="bg-lake-blue hover:opacity-90 text-white font-display px-8 py-3 rounded transition-colors">
              VIEW ALL WATER GEAR
            </button>
          </div>
        </div>
      </section>
      {/* Featured Water Destinations */}
      <section className="py-16 bg-carbon-black">
        <div className="container mx-auto px-4">
          <h2 className="font-display text-3xl md:text-4xl mb-8">
            ICONIC WATER DESTINATIONS
          </h2>
          <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
            {waterDestinations.map(destination => <div key={destination.id} className="group relative h-80 overflow-hidden rounded-lg">
                <img src={destination.image} alt={destination.name} className="w-full h-full object-cover transition-transform duration-500 group-hover:scale-110" />
                <div className="absolute inset-0 bg-gradient-to-t from-carbon-black to-transparent"></div>
                <div className="absolute bottom-0 left-0 p-6">
                  <h3 className="font-display text-2xl text-white mb-1">
                    {destination.name}
                  </h3>
                  <div className="flex items-center text-gray-300 mb-4">
                    <MapPin size={16} className="mr-1" />
                    <span>{destination.location}</span>
                  </div>
                  <Link to={`/water-destinations/${destination.id}`} className="inline-flex items-center text-lake-blue">
                    <span className="mr-1">Destination Guide</span>
                    <ArrowRight size={16} className="transition-transform group-hover:translate-x-1" />
                  </Link>
                </div>
              </div>)}
          </div>
        </div>
      </section>
      {/* Water Activity Guides */}
      <section className="py-16">
        <div className="container mx-auto px-4">
          <div className="flex flex-col md:flex-row justify-between items-center mb-8">
            <h2 className="font-display text-3xl md:text-4xl mb-4 md:mb-0">
              WATER GUIDES & RESOURCES
            </h2>
            <Link to="/guides" className="flex items-center text-lake-blue hover:opacity-90 transition-colors">
              <span className="mr-2 font-display">VIEW ALL GUIDES</span>
              <ArrowRight size={20} />
            </Link>
          </div>
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
            <Link to="/guides/kayak-buying" className="group">
              <div className="bg-carbon-black rounded-lg overflow-hidden h-full flex flex-col">
                <div className="relative h-48 overflow-hidden">
                  <img src="https://images.unsplash.com/photo-1572331165267-854da2b10ccc?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=700&q=80" alt="Kayak Buying Guide" className="w-full h-full object-cover transition-transform duration-500 group-hover:scale-110" />
                </div>
                <div className="p-6 flex-grow">
                  <div className="mb-2 text-sm text-gray-400">16 min read</div>
                  <h3 className="font-display text-xl mb-3 group-hover:text-lake-blue transition-colors">
                    How to Choose Your First Kayak: A Complete Guide
                  </h3>
                  <p className="text-gray-300">
                    From recreational to touring and whitewater kayaks, learn
                    how to select the perfect boat for your paddling adventures.
                  </p>
                </div>
              </div>
            </Link>
            <Link to="/guides/paddleboard-techniques" className="group">
              <div className="bg-carbon-black rounded-lg overflow-hidden h-full flex flex-col">
                <div className="relative h-48 overflow-hidden">
                  <img src="https://images.unsplash.com/photo-1526188717906-ab5f4068634e?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=700&q=80" alt="Paddleboard Techniques" className="w-full h-full object-cover transition-transform duration-500 group-hover:scale-110" />
                </div>
                <div className="p-6 flex-grow">
                  <div className="mb-2 text-sm text-gray-400">14 min read</div>
                  <h3 className="font-display text-xl mb-3 group-hover:text-lake-blue transition-colors">
                    Advanced Paddleboard Techniques for Open Water
                  </h3>
                  <p className="text-gray-300">
                    Take your SUP skills to the next level with these advanced
                    techniques for navigating waves, wind, and currents.
                  </p>
                </div>
              </div>
            </Link>
            <Link to="/guides/water-safety" className="group">
              <div className="bg-carbon-black rounded-lg overflow-hidden h-full flex flex-col">
                <div className="relative h-48 overflow-hidden">
                  <img src="https://images.unsplash.com/photo-1530870110042-98b2cb110834?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=700&q=80" alt="Water Safety Guide" className="w-full h-full object-cover transition-transform duration-500 group-hover:scale-110" />
                </div>
                <div className="p-6 flex-grow">
                  <div className="mb-2 text-sm text-gray-400">18 min read</div>
                  <h3 className="font-display text-xl mb-3 group-hover:text-lake-blue transition-colors">
                    Essential Water Safety for Paddlesports
                  </h3>
                  <p className="text-gray-300">
                    Learn critical safety protocols, rescue techniques, and
                    equipment choices that could save your life on the water.
                  </p>
                </div>
              </div>
            </Link>
          </div>
        </div>
      </section>
    </div>;
}